<template>
  <div class="map">
    <div class="keyword">
      <span>地区关键词:</span>
      <el-input v-model="input" placeholder="请输入地区关键词" />
      <button v-show="false" ref="button" @click="huan">
        换中心点
      </button>
    </div>
    <div class="container">
      <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orgMessage: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
      // 当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
      center: { lng: 116.404, lat: 39.915 },
      zoom: 3,
      map: null,
      BMap: null,
      input: ''
    }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.button.click()
    })
  },
  methods: {
    // 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
    handler({ BMap, map }) {
      this.map = map
      this.BMap = BMap
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    huan() { // 换中心点
      console.log(this.orgMessage)
      this.input = this.orgMessage.name
      this.center.lng = this.orgMessage.longitude
      this.center.lat = this.orgMessage.latitude
    }
  }
}

</script>

<style lang="scss" scoped>
.map {
  padding: 20px;
  .keyword {
    span {
      color: #20232a;
      font-weight: 400;
      font-size: 14px;
    }
    .el-input {
      width: 230px;
      margin-bottom: 20px;
    }
  }
}
</style>

<style lang="scss" scoped>
.container{
height: 668px;
}
</style>

<style>
	.container {
		width: 100%;
		height: 100%;
	}
	.bm-view {
		width: 100%;
		height: 100%;
	}
</style>
